<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{bodyform.coinType}}-{{bodyform.tradeDuration}}
				</view>
				<view @click="$tool.navTo('/pages/fwb/fwb?type=14')" class="flex-1 text-alignR A-Medium record"
					:class="model=='light'?'recordLight':''">
					<view class="pr-3">
						{{i18n3.t006}}
					</view>
				</view>
			</view>
			<!--  -->
			<view class="" :style="model=='light'?'background: #E6E8EF;':''">
				<view class="" style="height: 24rpx;">

				</view>
				<view class="nameList ml-3 flex  A-Medium" :class="model=='light'?'nameListLight':''">
					<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
						:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
						{{item}}
					</view>
				</view>
				<view class="" style="height: 36rpx;">

				</view>
				<view style="width: 100%;text-align: center;">
					<image :src="'/static/images/option/1_light.png'" style="width: 690rpx;height: 27rpx;"></image>
					<!-- <image :src="'/static/images/option/1_'+model+'.png'" style="width: 690rpx;height: 27rpx;"></image> -->
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view v-if="optionBTC&&optionETH" class="content A-Medium p-3 m-3" :class="model=='light'?'contentLight':''">
			<!-- 第一行 -->
			<view class="flex align-center justify-between">
				<view class="flex align-center">
					<view v-if="bodyform.coinType=='ETH'" class="f0 mr-2">
						<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/option/6_'+model+'.png'"
							mode=""></image>
					</view>
					<view v-else class="f0 mr-2">
						<image style="width: 72rpx;height: 72rpx;" :src="'/static/images/option/2_'+model+'.png'"
							mode=""></image>
					</view>
					<view class="">
						<view class="color1" style="font-size: 28rpx;">
							{{bodyform.coinType}}
						</view>
						<view class="color2 A-Regular" style="font-size: 24rpx;">
							USDT
						</view>
					</view>
				</view>
				<view class="flex flex-column align-end">
					<view class="color1" style="font-size: 28rpx;">
						{{USDTMoney.a||0}}
					</view>
					<view class="color2 A-Regular" style="font-size: 24rpx;">
						{{i18n4.l023}}USDT
					</view>
				</view>
			</view>
			<view class="border my-3">

			</view>
			<!-- 第二行 -->
			<view class="flex align-center mb-1">
				<view class="f0 mr-1">
					<image style="width: 30rpx;height: 30rpx;" src="/static/images/icon22.png" mode=""></image>
				</view>
				<view class="color1" style="font-size: 24rpx;">
					Binance {{i18n4.l021}}
				</view>
			</view>
			<!-- 第三行 -->
			<view class="A-Medium">
				<text class="color1" style="font-size: 32rpx;">
					$
				</text>
				<text class="color1" style="font-size: 44rpx;">
					<!-- 56,852.23 -->
					{{bodyform.coinType=='ETH'?(optionETH.price/1).toFixed(2):(optionBTC.price/1).toFixed(2)}}
				</text>
			</view>
			<!-- 第四行 -->
			<view class="inputWrap px-3 mb-3 flex align-center">
				<input v-model="BullishPrice" type="text" placeholder-class="A-Regular placeholderClass" :placeholder="i18n4.l024">
			</view>
			<!-- 第五行 -->
			<view class="flex align-center">
				<view class="color2 mr-1" style="font-size: 28rpx;">
					{{i18n4.l022}}:
				</view>
				<view class="color3 A-Regular" style="font-size: 32rpx;">
					{{time1}}
				</view>
			</view>
			<!-- 第六行 -->
			<view class="flex align-center mt-3 justify-between">
				<view @click="handelBuy('Bullish')" class="btn1 flex align-center justify-center">
					<view class="f0 mr-1">
						<image style="width: 22rpx;height: 28rpx;" src="/static/images/icon33.png" mode=""></image>
					</view>
					<view class="color4" style="font-size: 28rpx;">
						{{i18n.o004}}
					</view>
				</view>
				<view @click="handelBuy('Bearish')" class="btn2 flex align-center justify-center">
					<view class="f0 mr-1">
						<image style="width: 22rpx;height: 28rpx;" src="/static/images/icon44.png" mode=""></image>
					</view>
					<view class="color4" style="font-size: 28rpx;">
						{{i18n.o005}}
					</view>
				</view>
			</view>
		</view>
		<view class="orderTab A-Medium mt-4 ml-3 flex align-center justify-between"
			:class="model=='light'?'orderTabLight':''">
			<view class="flex align-center">
				<view :class="queryParams.optionsOrderQueryStatus==item.value?'tabItem2  mr-3':'tabItem1 mr-3' "
					v-for="(item,index) in tabs" :key="index" @click="changeTab(item.value)">
					{{item.text}}
				</view>

			</view>
		</view>
		<view class="orderList A-Medium mt-2" :class="model=='light'?'orderListLight':''">
			<view v-for="(item,index) in listData" class="orderItem mx-3" style="margin-bottom: 12rpx;">
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.orderNo}}
					</view>
					<view class="">
						{{item.createTime}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{item.coinType}}/USDT-{{item.tradeDuration}}M
						</view>
					</view>
				</view>
				<!-- 看涨看跌买入价格 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						<!-- {{i18n.o008}} -->
						{{item.bullishBearish=='Bearish'?i18n10.n140:i18n10.n141}}
					</view>
					<view class="">
						${{item.buyPrice}}
					</view>
				</view>
				<!-- 买入金额 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n.o009}}
					</view>
					<view class="">
						${{item.buyAmount}}
					</view>
				</view>
				<!-- 当前实时价格 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.coinType}}{{i18n.o010}}
					</view>
					<view class="">
						${{item.currentPrice}}
					</view>
				</view>
				<!-- 当前盈亏 v-if="item.sellPrice" -->
				<view class="flex text1 align-center justify-between"
					style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n.o011}}
					</view>
					<view :class="(item.profitLoss-item.buyAmount<0)?'price2':'price1'" >
						$
						<template v-if="(item.profitLoss-item.buyAmount)>0">
							+
						</template>
						{{item.profitLoss-item.buyAmount}}
					</view>
				</view>
				<template v-if="item.optionsOrderStatus==4">
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o012}}
						</view>
						<view class="flex">
							<view class="">
								{{i18n2.l014}}
							</view>
						</view>
					</view>
				</template>

				<template v-if="item.optionsOrderStatus==1||item.optionsOrderStatus==2||item.optionsOrderStatus==3">
					<!-- {{item.pdjs1}}
					{{item.pdjs2}} -->
					<view v-if="!(item.pdjs1=='00:00:00'&&item.pdjs2=='00:00:00')"
						class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o012}}
						</view>
						<view v-if="item.pdjs1!='00:00:00'" class="flex">
							<view class="">
								{{item.pdjs1}}
							</view>
						</view>
						<view v-else class="flex">
							<view class="">
								{{item.pdjs2}}
							</view>
							<view @click="closePosition(item)" class="label ml-1">
								{{i18n.o013}}
							</view>
						</view>
					</view>
					<view v-else class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o014}}
						</view>
						<view class="flex">
							<view v-if="item.pdjs3!='00:00:00'" class="">
								{{item.pdjs3}}
							</view>
							<view v-else class="ml-1">
								{{i18n.o015}}
							</view>
						</view>
					</view>
				</template>

			</view>
		</view>
		<modelP :type="3" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		optionsAdd,
		optionsList,
		optionsOrderStatus,
		coinglassOhlc_history,
		close_position
	} from '@/core/api/index.js';
	import {
		optionOrderMaxMin
	} from '@/core/api/user.js';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	import modelP from '@/components/modelP.vue';
	export default {
		components: {
			modelP
		},
		data() {
			return {
				nameList: ['15m', '30m', '1h'],
				priceType: 0,
				listData: [],
				price: '',
				bodyform: {
					tradeDuration: '', //交易时限
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					coinType: 'BTC', //币种
					buyPrice: '', //买入价
					buyAmount: '', //买入金额
					bullishBearish: '', // 看涨或看跌，看涨：Bullish, 看跌：Bearish
				},
				BullishPrice: '', //看涨价格
				BearishPrice: 1000, //看跌价格

				queryParams: {
					// pageNo: 1,
					// pageSize: 10,
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					coinType: 'BTC', //币种
					tradeDuration: '',
					optionsOrderQueryStatus: ''
				},
				tabs: [],
				objInfo: {},
				time: '',
				timer2: null,
				timer3: null,
				countdownInterval: null,
				timer: '',
			}
		},
		onLoad(options) {
			
			this.bodyform.tradeDuration = options.tradeDuration;
			this.bodyform.coinType = options.coinType;
			this.queryParams.tradeDuration = options.tradeDuration;
			this.queryParams.coinType = options.coinType;
			this.price = options.price;
			this.changeTime3();
			this.getTabs();
			// optionOrderMaxMin().then(res => {
			// 	console.log(res.result, 'cs------cs');
				// [{
				// 		"value": "max_ETH",
				// 		"text": "10",
				// 		"color": null,
				// 		"description": null,
				// 		"jsonObject": null,
				// 		"label": "10",
				// 		"title": "10"
				// 	},
				// 	{
				// 		"value": "min_ETH",
				// 		"text": "1",
				// 		"color": null,
				// 		"description": null,
				// 		"jsonObject": null,
				// 		"label": "1",
				// 		"title": "1"
				// 	},
				// 	{
				// 		"value": "max_BTC",
				// 		"text": "10",
				// 		"color": null,
				// 		"description": null,
				// 		"jsonObject": null,
				// 		"label": "10",
				// 		"title": "10"
				// 	},
				// 	{
				// 		"value": "min_BTC",
				// 		"text": "1",
				// 		"color": null,
				// 		"description": null,
				// 		"jsonObject": null,
				// 		"label": "1",
				// 		"title": "1"
				// 	}
				// ]
			// })
			// this.objInfo = JSON.parse(uni.getStorageSync('option2'));
			// this.countdownToSpecificTime([this.objInfo.buyTimeStart, this.objInfo.buyTimeEnd], 1);

		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		computed: {
			i18n() {
				return this.$t('option2');
			},
			i18n2() {
				return this.$t('last');
			},
			i18n3() {
				return this.$t('trade')
			},
			i18n4() {
				return this.$t('last3');
			},
			i18n10() {
				return this.$t('newObj');
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			model() {
				return this.$store.state.config.model;
			},
			capitalPassword() {
				return this.$store.state.config.capitalPassword
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
			optionBTC() {
				return this.$store.state.config.optionBTC;
			},
			optionETH() {
				return this.$store.state.config.optionETH;
			},
		},
		onReachBottom() {
			this.queryParams.pageNo++;
			this.getList();
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			changeTime3() {
				this.changeTime2();
				clearInterval(this.timer2);
				this.timer2 = null;
				this.timer2 = setInterval(e => {
					this.changeTime2();
				}, 1000)
			},
			changeTime2() {
				if (this.bodyform.coinType == 'ETH') {
					this.bodyform.sellTimeStart = this.optionETH.sellTimeStart;
					this.bodyform.sellTimeEnd = this.optionETH.sellTimeEnd;
					this.bodyform.buyTimeStart = this.optionETH.buyTimeStart;
					this.bodyform.buyTimeEnd = this.optionETH.buyTimeEnd;
					this.bodyform.settlementTimeStart = this.optionETH.settlementTimeStart;
					this.bodyform.settlementTimeEnd = this.optionETH.settlementTimeEnd;
				} else {
					this.bodyform.sellTimeStart = this.optionBTC.sellTimeStart;
					this.bodyform.sellTimeEnd = this.optionBTC.sellTimeEnd;
					this.bodyform.buyTimeStart = this.optionBTC.buyTimeStart;
					this.bodyform.buyTimeEnd = this.optionBTC.buyTimeEnd;
					this.bodyform.settlementTimeStart = this.optionBTC.settlementTimeStart;
					this.bodyform.settlementTimeEnd = this.optionBTC.settlementTimeEnd;
				}
				this.time1 = this.changeTime(this.optionBTC.buyTimeEnd.split(':'), 1);
			},
			changeTime(arr, type) {
				// type 1购买 2平仓 3交割
				const now = new Date();
				const targetTime = new Date(now);
				if (arr.length == 2) {
					arr[2] = '00';
				}
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					return '-- : -- : --';
				}
				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				if (type == 1) {
					return hours + ':' + minutes + ':' + seconds;
				}
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				return this.$store.state.config.optionBTC = '';
				return this.$store.state.config.optionETH = '';
				this.timer3 = setInterval(e => {
					if (this.optionBTC != '') {
						this.changeTime3();
						clearInterval(this.timer3);
						this.timer3 = null;
					}
				}, 500)
				this.$store.commit("config/set_optionType", this.nameList[this.priceType]);
			},
			/** 订单列表*/
			getList() {
				// this.$tool.showLoading();
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				if(obj.tradeDuration=='1h'){
					obj.tradeDuration = 60;
				}else{
					obj.tradeDuration = obj.tradeDuration.replace('m', '');
					obj.tradeDuration = Number(obj.tradeDuration);
				}
				
				optionsList(obj).then(res => {
					// uni.hideLoading();
					let list = res.result.records;
					// list = [{
     //                "id": "1828323721453228034",
     //                "createBy": "1820672874877382656",
     //                "createTime": "2024-08-27 14:48:38",
     //                "updateBy": null,
     //                "updateTime": "2024-08-27 14:50:36",
     //                "sysOrgCode": null,
     //                "mobileUserId": "1820672874877382656",
     //                "optionsOrderStatus": "1",
     //                "coinType": "BTC",
     //                "tradeDuration": 15,
     //                "orderNo": "1828323721432256512",
     //                "bullishBearish": "Bullish",
     //                "buyPrice": 62766.99,
     //                "sellPrice": null,
     //                "settlementPrice": null,
     //                "buyAmount": 10,
     //                "currentPrice": 62792.88,
     //                "profitLoss": null,
     //                "buyTimeStart": "15:00:00",
     //                "buyTimeEnd": "15:20:00",
     //                "sellTimeStart": "15:20:00",
     //                "sellTimeEnd": "15:40:00",
     //                "settlementTimeStart": "15:40:00",
     //                "settlementTimeEnd": "15:59:59",
     //                "isCommission": "0",
     //                "optionsOrderStatus_dictText": "可平仓订单",
     //                "bullishBearish_dictText": "看涨"
     //            }]
					if (this.queryParams.pageNo == 1) {
						this.listData = list;
					} else {
						if (list.length == 0) {
							this.queryParams.pageNo--;
						} else {
							this.listData.push(...list);
						}
					}
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].pdjs1 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeStart
							.split(':'));
						this.listData[i].pdjs2 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeEnd.split(
							':'));
						this.listData[i].pdjs3 = this.getTimeRemainingUntil1845(this.listData[i].settlementTimeEnd
							.split(':'));
					}
					this.$forceUpdate();
					this.changeList();
					setTimeout(res=>{
						this.getList();
					},1000)
				}).catch(res=>{
					setTimeout(res=>{
						this.getList();
					},1000)
					// uni.hideLoading()
				})
			},
			changeList() {
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(res => {
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].pdjs1 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeStart
							.split(':'));
						this.listData[i].pdjs2 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeEnd.split(
							':'));
						this.listData[i].pdjs3 = this.getTimeRemainingUntil1845(this.listData[i].settlementTimeEnd
							.split(':'));
						if(this.listData[i].pdjs2=='00:00:00'&&this.queryParams.optionsOrderQueryStatus==1){
							clearInterval(this.timer);
							this.timer = null;
							this.queryParams.pageNo==1;
							this.getList();
						}
						if(this.listData[i].pdjs3=='00:00:00'&&this.queryParams.optionsOrderQueryStatus==2){
							clearInterval(this.timer);
							this.timer = null;
							this.queryParams.pageNo==1;
							this.getList();
						}
					}
					this.$forceUpdate();
				}, 1000)
			},
			getTimeRemainingUntil1845(arr, type) {
				const now = new Date();
				const targetTime = new Date(now);
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					// targetTime.setDate(targetTime.getDate() + 1);
					// this.queryParams.pageNo=1;
					// this.getList();
					return '00:00:00';
				}
				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				return hours + ':' + minutes + ':' + seconds;
			},
			/** 获取tab*/
			getTabs() {
				optionsOrderStatus().then(res => {
					this.tabs = res.result;
					this.queryParams.optionsOrderQueryStatus = this.tabs[0].value; //optionsOrderStatus
					// this.queryParams.pageNo = 1;
					this.getList()
				})
			},
			/** 看涨调整*/
			BullishNum(type) {
				if (type == '-') {
					if (this.BullishPrice <= 1000) {
						return;
					}
					this.BullishPrice -= 1000
				} else if (type == '+') {
					this.BullishPrice += 1000
				}
			},
			/** 看跌调整*/
			BearishNum(type) {
				if (type == '-') {
					if (this.BearishPrice <= 1000) {
						return;
					}
					this.BearishPrice -= 1000
				} else if (type == '+') {
					this.BearishPrice += 1000
				}
			},
			/** 点击购买 */
			handelBuy(type) {
				if(this.BullishPrice===''){
					this.$tool.showToast(this.i18n4.l024);
					return;
				}
				// if (this.passportAuthStatus != 3) {
				// 	// 未提交
				// 	this.$tool.showToast(this.i18n2.l015);
				// 	return;
				// }
				if (this.time1 == '-- : -- : --') {
					return;
				}
				// if (!this.capitalPassword) {
				// 	let obj = {
				// 		type: 2,
				// 		verifyType: '',
				// 		account: '',
				// 	}
				// 	// true- 有手机号
				// 	if (this.mobileNumber) {
				// 		obj.verifyType = 1;
				// 		obj.account = this.mobileNumber;
				// 	} else {
				// 		obj.verifyType = 2;
				// 		obj.account = this.this.mobileNumber;
				// 	}
				// 	this.$tool.navTo(this.$tool.handleUrl('/pages/mine/testVerify', obj));
				// 	return;
				// }
				this.bodyform.bullishBearish = type
				// this.$tool.navTo('/pages/mine/moneyPass')
				this.$refs.modelP.open();
			},
			confrim(){
				this.pass();
			},
			pass() {
				
				let that = this
				let obj = JSON.parse(JSON.stringify(this.bodyform));
				if(obj.tradeDuration=='1h'){
					obj.tradeDuration = 60;
				}else{
					obj.tradeDuration = obj.tradeDuration.replace('m', '');
					obj.tradeDuration = Number(obj.tradeDuration);
				}
				if (obj.bullishBearish == 'Bullish') {
					obj.buyAmount = that.BullishPrice
				} else if (obj.bullishBearish == 'Bearish') {
					obj.buyAmount = that.BullishPrice
				}
				obj.buyPrice = this.price;
				optionsAdd(obj).then(res => {
					// 用户余额
					this.$store.dispatch('config/getAassetList');
					that.$tool.showToast(that.i18n.o018);
					clearInterval(this.timer);
					this.timer = null;
					this.queryParams.optionsOrderQueryStatus = 1;
					this.queryParams.pageNo = 1;
					that.getList()
				})
			},
			/** 切换tab */
			changeTab(value) {
				if (this.queryParams.optionsOrderQueryStatus == value) {
					return
				}
				// optionsOrderQueryStatus
				clearInterval(this.timer);
				this.timer = null;
				this.queryParams.optionsOrderQueryStatus = value;
				this.queryParams.pageNo = 1;
				this.getList()
			},
			countdownToSpecificTime(e, type) {
				// e 时间 e[0] 开始时间 e[1] 结束时间
				// num 1 2 3BTC的的三个时间 4 5 6ETH的三个时间
				// type 1 启示时间 2 截止时间 
				console.log(e, 'cs', this.objInfo, 'cs');
				let hour;
				let minute;
				let second;
				if (type == 1) {
					hour = e[0].split(':')[0];
					minute = e[0].split(':')[1];
					second = e[0].split(':')[2];
				} else if (type == 2) {
					hour = e[1].split(':')[0];
					minute = e[1].split(':')[1];
					second = e[1].split(':')[2];
				}
				// console.log(hour,minute,second);
				const targetTime = new Date();
				targetTime.setHours(hour);
				targetTime.setMinutes(minute);
				targetTime.setSeconds(second);
				targetTime.setMilliseconds(0);

				if (targetTime < new Date()) {
					if (type == 1) {
						// 超过启示时间 开始显示计时
						// console.log('超过启示时间',num)
						this.countdownToSpecificTime(e, 2);
						return;
					} else if (type == 2) {
						// 超过截止时间 开始显示计时
						// console.log('超过截止时间',num)
						this['time'] = '-- : -- : --';
					}
					// targetTime.setDate(targetTime.getDate() + 1);
				}

				this['countdownInterval'] = setInterval(res => {
					const now = new Date();
					const timeDifference = targetTime - now;
					if (timeDifference <= 0) {
						clearInterval(this['countdownInterval']);
						this['countdownInterval'] = null;
						// console.log("倒计时结束",num);

						if (type == 2) {
							this['time'] = '-- : -- : --';
						}
						return;
					}
					let hours = Math.floor(timeDifference / (1000 * 60 * 60));
					let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
					let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
					hours = String(hours).padStart(2, '0');
					minutes = String(minutes).padStart(2, '0');
					seconds = String(seconds).padStart(2, '0');
					if (type == 2) {
						this['time'] = hours + ':' + minutes + ':' + seconds;
					} else {
						this['time'] = '-- : -- : --';
					}
				}, 1000);
			},
			closePosition(item) {
				close_position({
					id: item.id,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					orderNo: item.orderNo
				}).then(res => {
					this.queryParams.optionsOrderQueryStatus = 4;
					clearInterval(this.timer);
					this.timer = null;
					this.queryParams.pageNo = 1;
					this.getList()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.content {
		background: #16181C;
		border-radius: 36rpx;

		.color1 {
			color: #F7F7F7;
		}

		.color2 {
			color: #7F838D;
		}

		.color3 {
			color: #82DA4C;
		}

		.color4 {
			color: #F7F7F7;
		}

		.inputWrap {
			margin-top: 38rpx;
			width: 630rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #30333C;

			input {
				color: #F7F7F7;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
		}

		.btn1 {
			width: 300rpx;
			height: 80rpx;
			background: #D22540;
			border-radius: 16rpx;
		}

		.btn2 {
			width: 300rpx;
			height: 80rpx;
			background: #53D290;
			border-radius: 16rpx;
		}

		.border {
			width: 630rpx;
			height: 4rpx;
			background: #30333C;
		}
	}

	.contentLight {
		background: #FFFFFF;
		border-radius: 36rpx;

		.color1 {
			color: #0E0F11;
		}

		.color2 {
			color: #7F838D;
		}

		.color3 {
			color: #82DA4C;
		}

		.color4 {
			color: #F7F7F7;
		}

		.inputWrap {
			margin-top: 38rpx;
			width: 630rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #ECECEC;

			input {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
		}

		.btn1 {
			width: 300rpx;
			height: 80rpx;
			background: #D22540;
			border-radius: 16rpx;
			border: none;
		}

		.btn2 {
			width: 300rpx;
			height: 80rpx;
			background: #53D290;
			border-radius: 16rpx;
		}

		.border {
			width: 630rpx;
			height: 4rpx;
			background: #F4F4F4;
		}
	}

	.orderTab {
		overflow-x: scroll;

		view {
			flex-shrink: 0;
		}

		.tabItem1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.tabItem2 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	.orderTabLight {
		.tabItem1 {
			color: #7F838D;
		}

		.tabItem2 {
			color: #0E0F11;
		}
	}

	.orderList {
		.orderItem {
			padding: 24rpx 30rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #1F2128;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.text3 {
				font-size: 24rpx;
				color: #F7F7F7;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #F7F7F7;
				margin-right: 8rpx;
			}

			.icon2 {
				width: 20rpx;
				height: 20rpx;
				background: #7F838D;
				margin-right: 8rpx;
			}

			.label {
				color: #82DA4C;
				font-size: 24rpx;
			}

			.price1 {
				font-size: 24rpx;
				color: #E7343F;
			}

			.price2 {
				font-size: 24rpx;
				color: #53D290;
			}

			.price3 {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.orderListLight {
		.orderItem {
			background: #FFFFFF;
			border: 2rpx solid #fff;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				color: #0E0F11;
			}

			.text3 {
				color: #0E0F11;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #0E0F11;
				margin-right: 8rpx;
			}

			.label {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.block {
		background: #16181C;
		border-radius: 36rpx;

		.text1 {
			font-size: 28rpx;
			color: #F7F7F7;
		}

		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 28rpx;
			color: #53D290;
		}

		.text4 {
			font-size: 28rpx;
			color: #82DA4C;
		}

		.text5 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.btn {
			width: 120rpx;
			height: 50rpx;
			background: #5951BA;
			border-radius: 122rpx;
			font-size: 24rpx;
			color: #F7F7F7;
			margin-top: 12rpx;
			margin-bottom: 16rpx;
		}

		.caoz {
			height: 40rpx;
			background: #1F2128;
			border-radius: 114rpx 114rpx 114rpx 114rpx;
			border: 2rpx solid #44474F;
			min-width: 166rpx;

			.num {
				font-size: 28rpx;
				color: #F7F7F7;
			}
		}
	}

	.blockLight {
		background: #fff;
		border-radius: 36rpx;

		.text1 {
			font-size: 28rpx;
			color: #0E0F11;
		}

		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 28rpx;
			color: #53D290;
		}

		.text4 {
			font-size: 28rpx;
			color: #82DA4C;
		}

		.text5 {
			font-size: 24rpx;
			background: #E6E8EF;
		}

		.btn {
			width: 120rpx;
			height: 50rpx;
			background: #5951BA;
			border-radius: 122rpx;
			font-size: 24rpx;
			color: #F7F7F7;
			margin-top: 12rpx;
			margin-bottom: 16rpx;
		}

		.caoz {
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 114rpx 114rpx 114rpx 114rpx;
			border: none;
			min-width: 166rpx;

			.num {
				font-size: 28rpx;
				color: #0E0F11;
			}
		}
	}

	.btn1 {
		width: 124rpx;
		height: 72rpx;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 2rpx solid #1F2128;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.btn1Light {
		width: 124rpx;
		height: 72rpx;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 2rpx solid #B5B7BF;
		font-size: 28rpx;
		color: #0E0F11;
	}

	.title1 {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.title1Light {
		font-size: 28rpx;
		color: #0E0F11;
	}

	.text1 {
		font-size: 24rpx;
		color: #D22540;
	}


	.nameList {
		width: 556rpx;
		margin: 0 auto;
		margin-top: 34rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}
</style>